<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="商品订单">
        <a-form :model="formState">
          <a-row>
            <a-col :span="4">
              <a-form-item label="商品名称">
                <a-input
                  style="width: 80%"
                  v-model:value="formState.goodName"
                  placeholder="输入商品名称关键词"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-form-item label="订单编号">
                <a-input
                  style="width: 80%"
                  v-model:value="formState.orderNo"
                  placeholder="输入商品编号"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-form-item label="商品类目">
                <a-select
                  ref="select"
                  v-model:value="formState.typeId"
                  style="width: 80%"
                  placeholder="商品类目"
                  @change="handleChangeType"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in goodsTypeList"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="子类目">
                <a-select
                  ref="select"
                  v-model:value="formState.subcategoryId"
                  style="width: 80%"
                  placeholder="商品子类目"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <template
                    v-if="
                      subcategoryList[0] &&
                      subcategoryList[0].childrenList.length > 0
                    "
                  >
                    <a-select-option
                      v-for="item in subcategoryList[0].childrenList"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.name }}</a-select-option
                    >
                  </template>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="成色">
                <a-select
                  ref="select"
                  v-model:value="formState.finenessId"
                  style="width: 80%"
                  placeholder="商品成色"
                >
                  <a-select-option :value="null">全部</a-select-option>
                  <a-select-option
                    v-for="item in goodsFinenessList"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.content }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="创建时间">
                <a-range-picker v-model:value="formState.creationTime" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <div></div>
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-radio-group
          v-model:value="formState.orderState"
          button-style="solid"
          @change="handleChangeTab"
        >
          <a-radio-button :value="null">全部</a-radio-button>
          <a-radio-button
            v-for="item in orderStateEnum.data"
            :value="item.value"
            >{{ item.name }}</a-radio-button
          >
        </a-radio-group>

        <div class="table-layout">
          <div
            class="table-card"
            v-for="(item, index) in dataSource"
            :key="index"
          >
            <div class="table-title">
              <text>订单编号：{{ item.orderNo }}</text>
              <text>下单时间：{{ item.createdTime }}</text>
            </div>

            <div class="table-item-layout">
              <div class="table-item" style="width: 30%">
                <div class="table-flex">
                  <a-image
                    :src="item.coverPic"
                    :preview="{
                      src: item.coverPic,
                    }"
                    :width="120"
                    :height="110"
                  />
                  <div style="margin-left: 20px">
                    <div>{{ item.goodsName }}</div>
                    <div>商品编号：{{ item.goodsNo }}</div>
                    <div>价 格：{{ item.totalAmount }}</div>
                  </div>
                </div>
              </div>
              <div class="table-item">
                {{ deliveryTypeArr[item.deliveryType - 1] }}
              </div>
              <div class="table-item">
                <div>会员满减：¥{{ item.vipDiscountAmount }}</div>
                <div>优 惠 券：¥{{ item.couponDiscountAmount }}</div>
                <div>积分抵扣：¥{{ item.pointDiscountAmount }}</div>
              </div>
              <div class="table-item">
                <div>应付：¥{{ item.payAmount }}</div>
                <a-typography-text type="secondary">
                  {{ payTypeEnum.getNameByValue(item.payType) }}
                </a-typography-text>
              </div>

              <div class="table-item">
                <template v-if="item.orderState == 1">
                  <a-typography-text type="danger">待付款</a-typography-text>
                  <a-typography-text
                    type="danger"
                    style="display: flex; align-items: center"
                    >还有
                    <a-statistic-countdown
                      style="font-size: 14px"
                      :value="dayjs(item.payEndTime).valueOf()"
                      format="D天H时m分s秒"
                    />
                    分钟自动取消</a-typography-text
                  >
                </template>
                <template v-else>
                  <a-typography-text>{{
                    orderStateEnum.getNameByValue(item.orderState)
                  }}</a-typography-text>
                </template>
              </div>
            </div>

            <div class="table-bottom-layout">
              <div class="table-bottom-left table-bottom-item">
                <div class="table-bottom-block">
                  收件人：{{ item.contactUserName }}
                </div>
                <div class="table-bottom-block">
                  联系电话：{{ item.contactMobile }}
                </div>
                <div class="table-bottom-block">
                  <div>收件地址：{{ item.address }}</div>
                  <a-button type="link" @click="handleCopy(item.address)"
                    >复制平台地址</a-button
                  >
                </div>
              </div>
              <a-space wrap class="table-bottom-item">
                <a-button type="primary" @click="seeFunc(item.id)"
                  >查看</a-button
                >
                <template v-if="item.orderState == 2">
                  <a-button @click="deliverGoodsFunc(item.id)">发货</a-button>
                  <a-button type="primary" danger @click="cancelOrderFunc(item.id)"
                    >取消订单</a-button
                  >
                </template>
              </a-space>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 20px">
          <a-pagination
            v-model:current="pagination.current"
            show-size-changer
            v-model:pageSize="pagination.pageSize"
            :total="pagination.total"
            @change="handleChangeSize"
            :showTotal="total => `共 ${total} 条`"
          />
        </div>
      </a-card>
    </a-space>
    <!-- 订单详情 -->
    <goodsOrderInfo ref="goodsOrderInfoRef" @refreshBindData="refreshList"></goodsOrderInfo>
    <!-- 发货 -->
    <deliverGoods
      ref="deliverGoodsRef"
      @refreshList="refreshList"
    ></deliverGoods>
    <!-- 取消订单 -->
    <cancelOrder ref="cancelOrderRef" @refreshList="refreshList"></cancelOrder>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import orderStateEnum from "@/enums/orderStateEnum.js";
import payTypeEnum from "@/enums/payTypeEnum.js";
import goodsOrderInfo from "./goodsOrderModule/goodsOrderInfo.vue";
import deliverGoods from "./goodsOrderModule/deliverGoods.vue";
import cancelOrder from "./goodsOrderModule/cancelOrder.vue";
import dayjs from "dayjs";
import { message } from "ant-design-vue";
import useClipboard from "vue-clipboard3";
import { getShopOrderList, goodsType, goodsFineness } from "@/api/order";
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  goodName: undefined,
  orderNo: undefined,
  finenessId: undefined,
  orderState: null,
  typeId: null,
  subcategoryId: undefined,
  startTime: undefined,
  endTime: undefined,
});

const deliveryTypeArr = ["顺丰到付", "门店自提", "包邮"];
const goodsOrderInfoRef = ref(null);
const seeFunc = (id) => {
  console.log(id);
  goodsOrderInfoRef.value.seeFunc(id);
};
// 发货
const deliverGoodsRef = ref(null);
const deliverGoodsFunc = (id) => {
  deliverGoodsRef.value.open(id);
};
// 取消订单
const cancelOrderRef = ref(null);
const cancelOrderFunc = (id) => {
  cancelOrderRef.value.open(id);
};
function handleSearch() {
  getShopOrderListFn();
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    goodName: undefined,
    orderNo: undefined,
    finenessId: undefined,
    orderState: null,
    typeId: null,
    subcategoryId: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  getShopOrderListFn();
}
function handleChangeTab(val) {
  formState.value.orderState = val.target.value;
  getShopOrderListFn();
}
const subcategoryList = ref([]);
function handleChangeType(val) {
  formState.value.subcategoryId = undefined;
  subcategoryList.value = goodsTypeList.value.filter(
    (value) => value.id == val
  );
}
function handleChangeSize(page, pageSize) {
  pagination.value.current = page;
  pagination.value.pageSize = pageSize;
  formState.value.pageSize = pageSize;
  formState.value.page = page;
  getShopOrderListFn();
}
const dataSource = ref([]);
const getShopOrderListFn = async () => {
  const data = await getShopOrderList(formState.value);
  if (data.code == 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};
const goodsTypeList = ref([]);
const getGoodsType = async () => {
  const result = await goodsType();
  if (result.code == 200) {
    goodsTypeList.value = result.data;
  }
};
const goodsFinenessList = ref([]);
const getGoodsFineness = async () => {
  const result = await goodsFineness();
  if (result.code == 200) {
    goodsFinenessList.value = result.data;
  }
};
function refreshList() {
  getShopOrderListFn();
}
const { toClipboard } = useClipboard();
const handleCopy = async (text) => {
  await toClipboard(text); //实现复制
  message.info("复制成功");
};
onMounted(() => {
  getGoodsType();
  getGoodsFineness();
  getShopOrderListFn();
});
</script>
<style lang="less" scoped>
:deep(.ant-statistic-content-value) {
  font-size: 14px !important;
  color: #ff4d4f !important;
  line-height: 3.5 !important;
}
.table-layout {
  margin-top: 24px;
  height: 500px;
  overflow-y: scroll;

  .table-card {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #e8ecf0;
    .table-title {
      padding: 15px 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: #f3f5f7;
      border-radius: 8px 8px 0 0;
      text {
        margin-right: 42px;
        color: #2b3453;
        font-size: 14px;
        font-weight: 600;
      }
    }

    .table-item-layout {
      display: flex;
      align-items: center;
      padding: 24px 0;
      .table-item:last-child {
        border-right: 0px solid #ffffff;
      }
      .table-item {
        width: 20%;
        height: 95px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 38px;
        box-sizing: border-box;
        border-right: 1px solid #e8ecf0;
        color: #2b3453;
        font-size: 14px;
        .table-flex {
          display: flex;
          align-items: center;
        }
      }
    }

    .table-bottom-layout {
      display: flex;
      justify-content: space-between;
      padding: 31px 0 24px 0;
      box-sizing: border-box;
      border-top: 1px solid #e8ecf0;
      .table-bottom-left {
        width: 80%;
        display: flex;
        align-items: center;
        .table-bottom-block {
          display: flex;
          align-items: center;
          margin-right: 70px;
          button{
            border: 1px solid rgb(168, 168, 168);
            margin-left: 10px;
          }
          button:hover{
            border: 1px solid rgb(0, 0, 0);
          }
        }
      }
      .table-bottom-item {
        padding: 0 24px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
